<template>
  <div class="product-edit-page">
    <van-nav-bar
      title="编辑商品"
      left-arrow
      @click-left="router.back()"
    />

    <van-form @submit="onSubmit">
      <!-- 商品名称 -->
      <van-field
        v-model="productForm.name"
        name="name"
        label="商品名称"
        placeholder="请输入商品名称"
        :rules="[{ required: true, message: '请填写商品名称' }]"
      />

      <!-- 商品价格 -->
      <van-field
        v-model="productForm.price"
        name="price"
        label="商品价格"
        placeholder="请输入商品价格"
        :rules="[
          { required: true, message: '请填写商品价格' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式' }
        ]"
      >
        <template #button>
          <span class="price-unit">元</span>
        </template>
      </van-field>

      <!-- 商品描述 -->
      <van-field
        v-model="productForm.description"
        name="description"
        label="商品描述"
        placeholder="请输入商品描述"
        type="textarea"
        rows="2"
        autosize
      />

      <!-- 商品图片 -->
      <div class="image-upload">
        <div class="upload-label">商品图片</div>
        <van-uploader
          v-model="productForm.imageList"
          :max-count="1"
          :after-read="afterRead"
        />
      </div>

      <!-- 提交按钮 -->
      <div class="submit-button">
        <van-button round block type="primary" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

// 商品表单数据
const productForm = ref({
  name: '',
  price: '',
  description: '',
  imageList: [] as any[]
})

// 模拟商品数据
const mockProducts = [
  {
    id: 1,
    name: '可口可乐',
    price: 3.5,
    description: '330ml罐装',
    image: '/products/coke.png',
    categoryId: 1
  },
  {
    id: 2,
    name: '雪碧',
    price: 3.5,
    description: '330ml罐装',
    image: '/products/sprite.png',
    categoryId: 1
  },
  {
    id: 3,
    name: '薯片',
    price: 5.0,
    description: '原味',
    image: '/products/chips.png',
    categoryId: 2
  }
]

// 获取商品数据
const getProductData = () => {
  const productId = Number(route.params.id)
  const product = mockProducts.find(p => p.id === productId)
  
  if (product) {
    productForm.value = {
      name: product.name,
      price: product.price.toString(),
      description: product.description || '',
      imageList: [{ url: product.image }]
    }
  } else {
    showToast({
      type: 'fail',
      message: '商品不存在'
    })
    router.back()
  }
}

// 图片上传处理
const afterRead = (file: any) => {
  // 这里应该上传图片到服务器
  // 暂时使用本地图片
  productForm.value.imageList = [file]
}

// 提交表单
const onSubmit = () => {
  const productId = Number(route.params.id)
  
  // 更新商品数据
  const updatedProduct = {
    id: productId,
    name: productForm.value.name,
    price: Number(productForm.value.price),
    description: productForm.value.description,
    image: productForm.value.imageList[0]?.url || '/products/default.png',
    categoryId: mockProducts.find(p => p.id === productId)?.categoryId || 0
  }

  // 这里应该调用API更新商品
  // 暂时使用模拟数据
  console.log('更新商品:', updatedProduct)

  showToast({
    type: 'success',
    message: '更新成功'
  })

  // 返回商品列表页
  router.back()
}

onMounted(() => {
  getProductData()
})
</script>

<style lang="scss" scoped>
.product-edit-page {
  min-height: 100vh;
  background: #f7f8fa;

  .price-unit {
    color: #969799;
    font-size: 14px;
  }

  .image-upload {
    padding: 16px;
    background: #fff;
    margin-top: 12px;

    .upload-label {
      margin-bottom: 8px;
      color: #323233;
    }
  }

  .submit-button {
    padding: 16px;
    margin-top: 24px;
  }
}
</style> 